<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-17 14:15:42
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-05-17 17:34:16
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\MyData\AllData\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="top">
      <div class="dayTime box">
        <h3>入驻天数</h3>
        <span>{{ 365 }}</span>
        天
      </div>
      <div class="activeNum box">
        <h3>参与活动次数</h3>
        <span>{{ 134 }}</span>
        次
      </div>
      <div class="updateNum box">
        <h3>资源下载数</h3>
        <span>{{ 1365 }}</span>
        份
      </div>
      <div class="lineTime box">
        <h3>在线时长</h3>
        <span>{{ 1 }}</span
        >h <span>{{ 34 }}</span
        >min
      </div>
      <div class="seeyouNum box">
        <h3>访问次数</h3>
        <span>{{ 24 }}</span>
        次
      </div>
    </div>
    <div class="content">
      <div class="activeData">
        <div class="toper">
          <h3>活动数据</h3>
          <h4>
            您共参加过
            <span>{{ 1 }}</span>
            次在线教研活动
          </h4>
        </div>
        <div class="box">
          <img src="../../../../assets/img/images/index_class.png" alt="" />
          <div class="msg">
            <div class="title">
              高一语文《红楼梦》与《乡土中国》在线协 同教研
            </div>
            <div class="update">活动心得已更新38份</div>
            <p>2022-05-05 （星期六） 12:00</p>
          </div>
        </div>
        <div class="details">
          在这场活动中，您的直播在线时长为
          <span>{{ 10 }}</span
          >min:回放在线时长为 <span>{{ 50 }}</span
          >min 有超过<span>{{ 100 }}</span>
          位老师和您一起在学习TA们分别来自全国<span>{{ 20 }}</span>
          个地级市，在这次活动中您共发言了<span>{{ 10 }}</span
          >次;送了 <span>{{ 10 }}</span
          >次礼物；点赞了<span>{{ 120 }}</span
          >次
          <p>课程结束后您的课件下载状态为:<a>【未下载】</a></p>
        </div>
      </div>
      <div class="resourceData">
        <h3>资源数据</h3>
        <div class="leiji">
          <div class="check">
            <img src="../../../../assets/img/images/5_03.png" alt="" />
            <div class="num">
              <p>累计查看</p>
              <span><a>200</a>份</span>
            </div>
          </div>
          <div class="share">
            <img src="../../../../assets/img/images/5_05.png" alt="" />
            <div class="num">
              <p>累计分享</p>
              <span><a>200</a>份</span>
            </div>
          </div>
          <div class="update">
            <img src="../../../../assets/img/images/5_07.png" alt="" />
            <div class="num">
              <p>累计分享</p>
              <span><a>200</a>份</span>
            </div>
          </div>
        </div>
        <div class="details">
          自从入驻平台以来，您累计下载了<span>{{ 200 }}</span
          >份资源，占全校下载数据的<span>{{ 2 }}%</span> ，超过了全校<span
            >{{ 90 }}%</span
          >
          的老师，入驻天数共计 天 在2021-11-11这一天,您下载了<span>{{
            20
          }}</span>
          份资源。相信这一天您一定非常辛苦吧！ 您一共在平台分享了<span>{{
            10
          }}</span>
          份资源。感谢您对其他老师无私的分享
          <p>
            您的热门搜索词是:<a>{{ "课件" }}</a
            >、<a>{{ "教案" }}</a
            >、<a>{{ "试卷" }}</a>
            。如果觉得内容不满足您的需求，可以<span>【点这里】</span>反馈。让我们感知您的需要
          </p>
        </div>
        <div class="resbox">
          <p>以下是您浏览过的热门资源:</p>
          <div class="box" v-for="item in 3" :key="item">
            <img src="../../../../assets/img/images/5_13.png" alt="" />
            <p>统编版高一语文必修上册第一单元《沁园春 · 长沙》 备课资源.doc</p>
          </div>
        </div>
      </div>
      .
      <div class="productData">
        <h3>产品数据</h3>
        <span
          >您在平台一共查看过<a>{{ 4 }}</a
          >个产品，她们分别是</span
        >
        <div class="proBox">
          <div class="box" v-for="item in 2" :key="item">
            <img src="../../../../assets/img/images/index_book2.png" alt="" />
            <div class="msg">
              <p>高中语文阅读新思路·建构与提升 第一册 精读</p>
              <span
                >浏览过<a>{{ 20 }}</a
                >次，本校超过<a>{{ 20 }}%</a>的老师在看</span
              >
            </div>
          </div>
        </div>
        <p class="seeMore">展开查看更多</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#container {
  padding-left: 20px;
  width: 700px;
  border-left: 1px solid #dee0e3;
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    width: 670px;
    .box {
      width: 129px;
      height: 80px;
      color: #fff;
      font-size: 12px;
      h3 {
        margin: 15px;
        margin-bottom: 8px;
      }
      span {
        margin-left: 15px;
        font-size: 28px;
      }
    }
    .dayTime {
      background-color: #8eaafa;
    }
    .activeNum {
      background-color: #fab87d;
    }
    .updateNum {
      background-color: #6ad791;
    }
    .lineTime {
      background-color: #7dbbfa;
    }
    .seeyouNum {
      background-color: #fc9697;
    }
  }
  .content {
    .activeData {
      margin-bottom: 30px;
      width: 670px;
      height: 500px;
      color: #646566;
      font-size: 14px;
      background: linear-gradient(30deg, #e6effa, #dcecfc, #dce5fb, #e8f7ff);
      overflow: hidden;
      span {
        font-size: 36px;
        font-family: DIN;
        font-weight: bold;
        color: #7393f0;
      }
      h3 {
        margin: 30px 0 10px 30px;
        color: #333333;
        font-size: 16px;
      }
      h4 {
        margin-left: 30px;
        margin-bottom: 10px;
      }
      .box {
        display: flex;
        margin: 0 auto;
        width: 610px;
        height: 160px;
        background-color: #eaf3fe;
        img {
          margin: 20px;
          width: 233px;
          height: 120px;
          background: #e4e4e4;
        }
        .msg {
          margin: 20px 32px 20px 0;
          .title {
            margin-bottom: 12px;
            font-size: 16px;
            color: #333333;
            font-weight: 600;
          }
          .update {
            width: 128px;
            height: 24px;
            background: #fdeff0;
            border-radius: 4px;
            color: #f63842;
            line-height: 42px;
            font-size: 12px;
            line-height: 24px;
            text-align: center;
            margin-bottom: 25px;
          }
        }
      }
      .details {
        width: 490px;
        margin-left: 30px;
        p {
          margin-top: 22px;
          a {
            color: #fb5b63;
          }
        }
      }
    }
    .resourceData {
      margin-bottom: 30px;
      width: 670px;
      height: 810px;
      background: linear-gradient(-30deg, #fadfd2, #fae9df, #f9dbc8, #fef6f3);
      overflow: hidden;
      h3 {
        margin: 30px;
        color: #333333;
        font-size: 16px;
      }
      .leiji {
        display: flex;
        margin-bottom: 20px;
        div {
          display: flex;
          margin-left: 30px;
          img {
            margin-right: 10px;
            width: 48px;
            height: 48px;
            background: #f9cdb7;
            border-radius: 50%;
          }
          .num {
            display: flex;
            flex-direction: column;
            margin: 0;
            p {
              font-size: 12px;
              color: #969799;
            }
            span {
              font-size: 12px;
              color: #969799;
              a {
                font-size: 24px;
                font-weight: bold;
                color: #646566;
              }
            }
          }
        }
      }
      .details {
        // width: 583px;
        margin-left: 30px;
        margin-right: 58px;
        span {
          font-size: 36px;
          font-family: DIN;
          font-weight: bold;
          color: #ee7068;
        }
        p {
          margin-top: 15px;
          line-height: 30px;
          span {
            font-size: 28px;
          }
          a {
            color: #fb5b63;
          }
        }
      }
      .resbox {
        margin-top: 20px;
        margin-left: 30px;
        p {
          font-size: 15px;
        }
        .box {
          display: flex;
          align-items: center;
          margin-top: 10px;
          width: 610px;
          height: 90px;
          background-color: #fdf2ed;
          img {
            margin-left: 30px;
            margin-right: 20px;
            width: 44px;
            height: 50px;
          }
          p {
            font-size: 14px;
            color: #626366;
          }
        }
      }
    }
    .productData {
      margin-bottom: 60px;
      width: 670px;
      background: linear-gradient(120deg, #e6faf8, #dcfcfc, #dbfbf6, #e8fff8);
      overflow: hidden;
      h3 {
        margin: 30px;
        color: #333333;
        font-size: 16px;
      }
      span {
        margin-left: 30px;
        font-size: 14px;
        color: #646566;
      }
      .proBox {
        margin: 0 auto;
        width: 610px;
        height: 310px;
        background-color: #e8fffc;
        .box {
          display: flex;
          margin: 20px 0 30px 20px;
          img {
            width: 90px;
            height: 120px;
            border: 1px solid #dddedb;
          }
          .msg {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 20px;
            p {
              font-size: 14px;
              color: #333333;
            }
            span {
              margin: 0;
              color: #939599;
              line-height: 34px;
              a {
                font-size: 36px;
                font-family: DIN;
                font-weight: bold;
                color: #24ba90;
              }
            }
          }
        }
      }
      .seeMore {
        padding: 20px 0 50px 0;
        text-align: center;
        color: #969799;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
